<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>用户管理</title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	<script src="../../../component/layui/layui.js"></script>
	<script src="../../../component/pear/pear.js"></script>
	<script src="../../../component/plug/xm-select.js"></script>
</head>

<body class="pear-container">
	<div class="layui-card">
		<div class="layui-collapse">
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">条件筛选<i class="layui-icon layui-colla-icon"></i></h2>
				<div class="layui-colla-content layui-show">
					<div class="layui-card-body">
						<form class="layui-form" action="" lay-filter="" id="FilterForm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">账号</label>
									<div class="layui-input-inline">
										<input type="text" name="keyword" placeholder="账号模糊查询" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">角色</label>
									<div class="layui-input-inline">
										<div id="roleIds">

										</div>
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">状态</label>
									<div class="layui-input-inline">
										<select name="isActive" lay-verify="">
											<option value="">请选择状态</option>
											<option value="true">有效</option>
											<option value="false">无效</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="filter">
										<i class="layui-icon layui-icon-search"></i>
										查询
									</button>
									<button type="reset" class="pear-btn pear-btn-md">
										<i class="layui-icon layui-icon-refresh"></i>
										重置
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- <div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">账号</label>
						<div class="layui-input-inline">
							<input type="text" name="keyword" placeholder="账号模糊查询" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">角色</label>
						<div class="layui-input-inline">
							<div id="roleIds">

							</div>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">状态</label>
						<div class="layui-input-inline">
							<select name="isActive" lay-verify="">
								<option value="">请选择状态</option>
								<option value="true">有效</option>
								<option value="false">无效</option>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label"></label>
						<div class="layui-input-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="filter">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div> -->

	<div class="layui-card">
		<div class="layui-card-body">
			<table id="table" lay-filter="table"></table>
		</div>
	</div>

</body>

</html>

<script type="text/html" id="toolbar">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增
	</button>
</script>

<script type="text/html" id="bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
	<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="templet-isActive">
	{{#if(d.isActive){}}
	<input type="checkbox" name="isActive" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="templet-isActive" checked  }}>
	{{# }else { }}
	<input type="checkbox" name="isActive" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="templet-isActive" }}>
	{{# } }}
</script>

<script>
	layui.use(['table', 'form', 'jquery', 'popup', 'common', 'context', 'permission', 'tableext'], function () {
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		let common = layui.common;
		let context = layui.context;
		let popup = layui.popup;

		let basePath = context.get("base-path");

		var filterData = {};//筛选条件
		//加载角色多选下拉框
		common.loadXmSelect({
			divId: "#roleIds",
			name: "roleIds",
			url: basePath + '/api/system/role/getlist',
			valueField: "id",
			textField: "name",
			filterable: true
		})

		table.render({
			elem: '#table',
			url: basePath + '/api/system/user/getpagedlist',
			toolbar: '#toolbar',
			cols: [[
				{ type: 'checkbox' },
				{ title: '编号', field: 'id', hide: true },
				{ title: '账号', field: 'account', width: 120 },
				{ title: '角色', field: 'roleNames', width: 200 },
				{ title: '状态', field: 'isActive', width: 100, templet: '#templet-isActive' },
				{ title: '最后登录时间', field: 'lastLoginTime', sort: true, width: 200 },
				{ title: '创建时间', field: 'creationTime', sort: true, width: 200 },
				{ title: '操作', toolbar: '#bar', width: 180 }
			]],
		});

		//table排序监听
		table.on('sort(table)', function (obj) {
			if (obj.type != null) {
				filterData.orderByField = obj.field + " " + obj.type
			} else {
				filterData.orderByField = ""
			}
			table.reload('table', {
				where: filterData
			})
		})

		//table操作栏
		table.on('tool(table)', function (obj) {
			if (obj.event === 'edit') {
				window.edit(obj);
			}
			else if (obj.event === 'remove') {
				window.del(obj);
			}
		});

		//table工具栏
		table.on('toolbar(table)', function (obj) {
			if (obj.event === 'add') {
				window.add(obj);
			} else if (obj.event === 'refresh') {
				window.refresh(obj)
			}
		});

		//查询
		form.on('submit(filter)', function (data) {
			for (var key in data.field) {
				filterData[key] = data.field[key]
			}
			table.reload('table', {
				where: filterData,
				page: {
					curr: 1 //重新从第 1 页开始
				}
			})
			return false;
		});


		form.on('switch(templet-isActive)', function (obj) {
			$.ajax({
				url: basePath + '/api/system/user/setactive',
				data: JSON.stringify({ "id": obj.value }),
				success: function (result) {
					if (result.succeeded) {
						popup.success("设置成功");
					} else {
						popup.failure(JSON.stringify(result.errors));
					}
				}
			})
		});

		window.add = function (obj) {
			layer.open({
				type: 2,
				title: '新增用户',
				shade: 0.1,
				area: ['500px', '500px'],
				content: 'add.html?fresh=' + Math.random()
			});
		}
		window.edit = function (obj) {
			layer.open({
				type: 2,
				title: '修改用户',
				shade: 0.1,
				area: ['500px', '500px'],
				content: 'edit.html?id=' + obj.data['id'] + '&fresh=' + Math.random()
			});
		}
		window.del = function (obj) {
			let lock = false;
			layer.confirm('确定要删除该用户', {
				icon: 3,
				title: '提示'
			}, function (index) {
				if (!lock) {
					lock = true;
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url: basePath + "/api/system/user/del",
						data: JSON.stringify({ id: obj.data['id'] }),
						success: function (result) {
							layer.close(loading);
							if (result.succeeded) {
								popup.success("删除成功", function () {
									obj.del();
								});
							} else {
								popup.failure(JSON.stringify(result.errors));
							}
						}
					})
				}
			});
		}
		window.refresh = function (obj) {
			table.reload('table')
		}
	})
</script>